<div id="typography" class="page-layout simple fullwidth doc-page" layout="column">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="column" layout-align="center start">
        <div class="breadcrumb" layout="row" layout-align="start center">
            <md-icon md-font-icon="icon-home" class="s16"></md-icon>
            <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
            <span class="parent">USER INTERFACE</span>
        </div>

        <div class="title">Typography</div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <div class="md-title">Material design headings</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">112px</div>
                    <span class="md-display-4">Display 4</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-display-4">Display 4</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">56px</div>
                    <span class="md-display-3">Display 3</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-display-3">Display 3</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">45px</div>
                    <span class="md-display-2">Display 2</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-display-2">Display 2</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">34px</div>
                    <span class="md-display-1">Display 1</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-display-1">Display 1</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">24px</div>
                    <span class="md-headline">Headline</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-headline">Headline</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">20px</div>
                    <span class="md-title">Title</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-title">Title</span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">16px</div>
                    <span class="md-subhead">Subhead</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <span class="md-subhead">Subhead</span>
                </hljs>
            </div>
        </div>

        <div class="md-title">Headings</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">24px</div>
                    <h1>Heading 1</h1>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h1>Heading 1</h1>

                    <div class="h1">Heading 1</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">20px</div>
                    <h2>Heading 2</h2>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h2>Heading 2</h2>

                    <div class="h2">Heading 2</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">16px</div>
                    <h3>Heading 3</h3>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h3>Heading 3</h3>

                    <div class="h3">Heading 3</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">14px</div>
                    <h4>Heading 4</h4>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h4>Heading 4</h4>

                    <div class="h4">Heading 4</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">13px</div>
                    <h5>Heading 5</h5>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h5>Heading 5</h5>

                    <div class="h5">Heading 5</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption secondary-text">12px</div>
                    <h6>Heading 6</h6>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex>
                    <h6>Heading 6</h6>

                    <div class="h6">Heading 6</div>
                </hljs>
            </div>
        </div>

        <div class="md-title">Inline text elements</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is a
                        <mark>marked</mark>
                        text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is a
                    <mark>marked</mark>
                    text.
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>
                        <del>This is a deleted text.</del>
                    </span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <del>This is a deleted text.</del>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><s>This is a strike-through text.</s></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <s>This is a strike-through text.</s>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><u>This is an underlined text.</u></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <u>This is an underlined text.</u>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>
                        <small>This is a small text.</small>
                    </span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <small>This is a small text.</small>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><strong>This is a strong text.</strong></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scrollx>
                    <strong>This is a strong text.</strong>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><em>This is an italic text.</em></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <em>This is an italic text.</em>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is a <span class="text-super">super</span> text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is a <span class="text-super">super</span> text.
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is a <span class="text-sub">sub</span> text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is a <span class="text-sub">sub</span> text.
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is a <span class="text-capitalize">capitalized</span> text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is a <span class="text-capitalized">capitalized</span> text.
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is an <span class="text-uppercase">uppercase</span> text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is an <span class="text-uppercase">uppercase</span> text.
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span>This is a <span class="text-lowercase">LOWERCASE</span> text.</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    This is a <span class="text-lowercase">LOWERCASE</span> text.
                </hljs>
            </div>
        </div>

        <div class="md-title">Abbrevations</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><abbr title="Angular JS">Angular JS</abbr></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <abbr title="Angular JS">Angular JS</abbr>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <abbr title="Cascaded Style Sheet">CSS</abbr>
                </hljs>
            </div>
        </div>

        <div class="md-title">Blockquotes</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <blockquote>
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                    </blockquote>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <blockquote>
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                    </blockquote>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <blockquote>
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                        <footer>
                            John Doe
                        </footer>
                    </blockquote>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <blockquote>
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                        <footer>
                            John Doe
                        </footer>
                    </blockquote>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <blockquote class="reverse">
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                        <footer>
                            John Doe
                        </footer>
                    </blockquote>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <blockquote class="reverse">
                        <p>
                            The bedding was hardly able to cover it and seemed ready to slide off any moment.
                        </p>
                        <footer>
                            John Doe
                        </footer>
                    </blockquote>
                </hljs>
            </div>
        </div>

        <div class="md-title">Lists</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <ul>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                    </ul>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <ul>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                    </ul>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <ol>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                    </ol>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <ol>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                    </ol>
                </hljs>
            </div>
        </div>

        <div class="md-title">Definition lists</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <dl>
                        <dt>Definition term</dt>
                        <dd>This is the definition description</dd>

                        <dt>Another definition term</dt>
                        <dd>This is also another definition description</dd>
                    </dl>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <dl>
                        <dt>Definition term</dt>
                        <dd>This is the definition description</dd>

                        <dt>Another definition term</dt>
                        <dd>This is also another definition description</dd>
                    </dl>
                </hljs>
            </div>
        </div>

        <div class="md-title">Other helpers</div>

        <div class="card md-whiteframe-4dp" layout="column">
            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="text-left">Left aligned text</div>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <div class="text-left">Left aligned text</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="text-center">Center aligned text</div>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <div class="text-center">Center aligned text</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="text-right">Right aligned text</div>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <div class="text-right">Right aligned text</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <p>
                        <span class="text-boxed">Boxed text</span>
                    </p>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <p>
                        <span class="text-boxed">Boxed text</span>
                    </p>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <p>
                        <span class="text-strike">Strike-through text</span>
                    </p>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <p>
                        <span class="text-strike">Strike-through text</span>
                    </p>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="text-italic">Italic text</div>
                    <div class="text-semibold">Semi-bold text</div>
                    <div class="text-bold">Bold text</div>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <div class="text-italic">Italic text</div>
                    <div class="text-semibold">Semi-bold text</div>
                    <div class="text-bold">Bold text</div>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <span class="text-truncate">
                        This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta
                        massa fermentum dictum. Aenean mollis molestie felis, ut interdum ex vehicula a.
                    </span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <span class="text-truncate">
                        This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta
                        massa fermentum dictum. Aenean mollis molestie felis, ut interdum ex vehicula a.
                    </span>
                </hljs>
            </div>

            <div layout="column" layout-gt-md="row">
                <div class="preview" layout="column" layout-align="center" flex>
                    <div class="md-caption mb-16">Font weight helpers from 100 to 900</div>
                    <span class="font-weight-100">font-weight: 100</span>
                    <span>...</span>
                    <span class="font-weight-900">font-weight: 900</span>
                </div>

                <hljs lang="html" class="source-code" layout="column" layout-align="center" flex ms-scroll>
                    <span class="font-weight-100">font-weight: 100</span>
                    ...
                    <span class="font-weight-900">font-weight: 900</span>
                </hljs>
            </div>
        </div>

    </div>
    <!-- / CONTENT -->

</div>